<!-- components/skeleton/skeleton.vue -->
<template>
	<view v-if="loading" class="skeleton-container" :class="{ animate: animate }">
		<slot>
			<!-- 默认骨架结构 -->
			<view
				v-if="type === 'text'"
				class="skeleton-text"
				:style="{ width: width }"
			></view>

			<view
				v-else-if="type === 'avatar'"
				class="skeleton-avatar"
				:style="{ width: size, height: size }"
			></view>

			<view v-else-if="type === 'paragraph'" class="skeleton-paragraph">
				<view
					v-for="n in rows"
					:key="n"
					class="skeleton-paragraph-row"
					:style="{ width: getRowWidth(n), height: rowHeight }"
				></view>
			</view>

			<view v-else-if="type === 'card'" class="skeleton-card">
				<view class="skeleton-card-header">
					<view
						class="skeleton-avatar"
						style="width: 40px; height: 40px"
					></view>
					<view
						class="skeleton-text"
						style="width: 80px; margin-left: 10px"
					></view>
				</view>
				<view class="skeleton-card-content">
					<view class="skeleton-text" style="width: 60%; margin: 10px 0"></view>
					<view
						class="skeleton-paragraph-row"
						style="width: 100%; height: 120px"
					></view>
				</view>
			</view>

			<view v-else-if="type === 'list-item'" class="skeleton-list-item">
				<view class="skeleton-avatar" style="width: 50px; height: 50px"></view>
				<view class="skeleton-list-item-content">
					<view
						class="skeleton-text"
						style="width: 60%; margin-bottom: 10px"
					></view>
					<view
						class="skeleton-paragraph-row"
						style="width: 90%; height: 14px"
					></view>
				</view>
			</view>

			<!-- 自定义样式插槽 -->
			<view v-else class="skeleton-custom">
				<slot name="custom"></slot>
			</view>
		</slot>
	</view>

	<!-- 插槽：真实内容 -->
	<view v-else>
		<slot name="content"></slot>
	</view>
</template>

<script>
export default {
	name: 'Skeleton',
	props: {
		// 是否显示骨架屏
		loading: {
			type: Boolean,
			default: true,
		},
		// 骨架类型: text | avatar | paragraph | card | list-item | custom
		type: {
			type: String,
			default: 'text',
		},
		// 是否开启动画（闪烁）
		animate: {
			type: Boolean,
			default: true,
		},
		// 宽度，支持 px/rpx/%
		width: {
			type: String,
			default: '100%',
		},
		// 高度（主要用于 text 类型）
		height: {
			type: String,
			default: '16px',
		},
		// 头像或元素尺寸
		size: {
			type: String,
			default: '40px',
		},
		// 段落行数
		rows: {
			type: Number,
			default: 3,
		},
		// 每行高度
		rowHeight: {
			type: String,
			default: '16px',
		},
		// 行宽模拟（模拟长短不一的文字）
		rowWidth: {
			type: [String, Array],
			default: () => ['100%', '90%', '80%'],
		},
	},
	methods: {
		getRowWidth(index) {
			const widths = Array.isArray(this.rowWidth)
				? this.rowWidth
				: [this.rowWidth];
			return widths[index - 1] || widths[widths.length - 1];
		},
	},
};
</script>

<style scoped>
.skeleton-container {
	position: relative;
	overflow: hidden;
}

/* 动画闪烁效果 */
.animate::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(
		90deg,
		transparent,
		rgba(255, 255, 255, 0.3),
		transparent
	);
	animation: shine 1.2s infinite;
	pointer-events: none;
}

@keyframes shine {
	0% {
		transform: translateX(-100%);
	}
	100% {
		transform: translateX(100%);
	}
}

/* 基础块 */
.skeleton-text,
.skeleton-paragraph-row {
	background: #eee;
	border-radius: 4px;
}

.skeleton-text {
	height: 16px;
	border-radius: 4px;
}

/* 头像 */
.skeleton-avatar {
	background: #eee;
	border-radius: 50%;
	display: inline-block;
}

/* 段落 */
.skeleton-paragraph-row {
	background: #eee;
	margin-bottom: 10px;
	border-radius: 4px;
}

.skeleton-paragraph-row:last-child {
	margin-bottom: 0;
}

/* 卡片 */
.skeleton-card {
	padding: 15px;
	background-color: #fff;
	border-radius: 8px;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
}
.skeleton-card-header {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
}
.skeleton-card-content {
	padding-left: 50px;
}

/* 列表项 */
.skeleton-list-item {
	display: flex;
	padding: 10px;
	border-bottom: 1px solid #f0f0f0;
}
.skeleton-list-item-content {
	flex: 1;
	margin-left: 10px;
	display: flex;
	flex-direction: column;
}

/* 自定义区域 */
.skeleton-custom {
	display: block;
}
</style>
